/// 页面 * 主界面 * 头右部菜单 * 样式

import { css } from '@emotion/css'
import { textEllipsis } from '@expresso/plus'

const menusRightCSS = css`
  ${flex()}
  height: 100%;
  cursor: pointer;

  > .menu {
    ${flex('center')}
    padding: 0 12px;
    height: 100%;
    transition: background-color 0.4s ease;

    /* 图标 */
    > .ex-icon:first-child {
      margin-right: 6px;
    }
    .ex-icon {
      color: #4993ff;
      transition:
        color 0.4s ease,
        transform 0.4s ease;
    }
    .icon-arrow {
      font-size: 12px;
      transform: rotate(0deg);
    }
    &:hover {
      .ex-icon {
        color: #268cff;
      }
      .icon-arrow {
        transform: rotate(90deg);
      }
      background-color: rgb(0 21 41 / 5%);
    }

    /* 项目列表 */
    &.project {
      > .ant-select {
        ${flex()}

        &.ant-select-open > .ant-select-selector > .ant-select-selection-item {
          color: rgba(0, 0, 0, 0.88);
        }

        > .ant-select-selector {
          padding: 0;
          background: transparent;
          border: 0;
          color: rgba(0, 0, 0, 0.88);

          > .ant-select-selection-search {
            display: none;
          }

          > .ant-select-selection-item {
            margin-top: 1px;
            padding-inline-end: 0;
          }
        }

        > .ant-select-arrow {
          position: initial;
          margin-top: 1px;
          margin-left: 6px;
        }
      }
    }

    /* 消息中心 */
    &.message {
      > .msg {
        ${flex('center')}
        ${wh(32)}
        border-radius: 50%;
        background: #fff;
        border: 1px solid #4993ff;
      }
    }

    /* 用户信息 */
    &.user {
      > .point {
        width: 5px;
        height: 5px;
        background: red;
        border-radius: 50%;
        margin-top: -15px;
      }
      > .user-abbr {
        ${flex('center')}
        ${wh(32)}
        ${font(16, 'bold', '#fff')}
        
        border-radius: 50%;
        background-color: #468dff;
      }

      > .user-name {
        margin-left: 6px;
        margin-right: 6px;
      }

      > .anticon {
        margin-top: 2px;
      }

      > .popup-container .ant-dropdown {
        top: 48px !important;

        > .ant-dropdown-menu {
          position: relative;
          max-width: 200px;
          padding: 12px 12px;
          width: max-content;

          // backdrop-filter: blur(5px);
          background: rgba(255, 255, 255, 0.625);
          border: 2px solid #ffffff;
          overflow: hidden;

          ${before(css`
            position: absolute;
            left: 0;
            top: 0;
            filter: blur(45px);
            width: 100%;
            height: 100%;
            background: #fff;
            z-index: -1;
          `)}

          > .info {
            display: grid;
            grid-gap: 12px 12px;
            grid-template-columns: repeat(2, 1fr);
            margin-bottom: 6px;
            padding-bottom: 18px;
            border-bottom: 1px solid #dfeeff;
            cursor: auto;

            &.only-item > .item {
              grid-column: span 2;
              margin: 0 auto;
            }

            > div {
              ${textEllipsis()}
            }

            > .title {
              grid-column: span 2;
              ${font(18, 'normal', '#202735')}
              text-align: center;
            }

            > .item {
              padding: 3px 8px;
              background: #e7f2ff;
              border-radius: 20px;
              border: 1px solid #85bdfe;
              text-align: center;
              ${font(12, 'normal', '#268cff')}
            }
          }

          > .ant-dropdown-menu-item {
            ${flex('center')}
            padding: 8px 12px;

            &:hover {
              background: #dfeeff;
            }
            > .ex-icon {
              color: #268cff;
            }
            &.logout > span {
              color: #ff4444 !important;
            }

            > .ant-dropdown-menu-title-content {
              color: #202735;
              flex: none;
            }
          }
        }
      }
      > .popup-message .ant-dropdown {
        > .message-box {
          padding: 5px 10px;
          box-sizing: border-box;
          width: 300px;
          height: auto;
          background: white;
          transition: 0.5s;
          box-shadow: 0px 4px 10px 0px rgba(205, 215, 232, 0.5);
          border-radius: 4px 4px 4px 4px;
          border: 2px solid #ffffff;
          > .item-more {
            font-weight: 400;
            font-size: 15px;
            color: #268cff;
            text-align: left;
            font-style: normal;
            text-transform: none;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
          }
          > .messsage-list {
            .message-content{
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            padding: 5px 10px;
            box-sizing: border-box;
            background: white;
            height: auto;
            border-bottom: 1px solid #dfeeff;

            > .message-btns {
              display: none;
              color: #268cff;
              justify-content: space-between;
              span {
                cursor: pointer;
              }
            }
            > .item-title {
              font-weight: 700;
              font-size: 14px;
              color: #202735;
              line-height: 20px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
            > .message-item {
              display: flex;
              margin: 5px 0;
              > .item-type {
                font-weight: 400;
                font-size: 14px;
                color: #ff4444;
                line-height: 20px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                flex: 1;
              }
              > .item-time {
                font-size: 12px;
                color: #6e7c94;
                line-height: 17px;
                text-align: right;
                font-style: normal;
                text-transform: none;
              }
            }
          }

          > .messsage-list:hover {
            transition: 0.5s;
            background: #eef5fd;
            > .message-btns {
              transition: 0.5s;
              display: flex;
            }
          }

          > .message-title {

            font-weight: bolder;
            font-size: 14px;
            line-height: 20px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            width: 100%;
            height: 41px;
            line-height: 41px;
            color: #268cff;
            border-bottom: 1px solid #dfeeff;
            > .title {
              font-weight: bolder;
            }
          }
        }
      }
    }
  }
`

export { menusRightCSS }
